<template>
	<div>
		<div class="word-container">
			<div class="forts">
				学生成绩修改
				<el-button @click='goBack()' class="back-button">
					返回首页
				</el-button>
			</div>
			<Time class="forts-time" />
		</div>

		<!-- 输入框 -->
		<div class="input-bar-sno">
			<el-form ref="table" :model="tableData" label-width="80px">
				<el-form-item label="学号">
					<el-input v-model="tableData.Sno"></el-input>
				</el-form-item>
				<el-form-item label="课程号">
					<el-input v-model="tableData.Cno"></el-input>
				</el-form-item>
				<el-form-item label="成绩">
					<el-input v-model="tableData.Score"></el-input>
				</el-form-item>
			</el-form>
		</div>
		<!-- 修改按键 -->
		<div class="update-button">
			<el-button ref="update-score-commit-button" type="primary" @click='update_score(tableData)'>
				修改
			</el-button>
		</div>

		<img src="../assets/logo.png" alt="" />
	</div>
</template>

<script>
	import {
		ElMessage
	} from 'element-plus'
	import Time from "./Time.vue";
	import {
		defineComponent,
		ref
	} from 'vue';
	export default {
		name: "ScoreUpdate",
		components: {
			Time,
			defineComponent,
			ref,
		},
		// 数据获取
		data() {
			return {
				tableData: {
				},
			}
		},
		methods: {
			goBack() {
				//直接跳转
				this.$router.push('/main');
			},
			update_score(row) {
				ElMessage.success({
					message: '修改成功',
					type: 'success',
				})
				this.axios.post('http://localhost:8081/score/change', {
					sno: row.sno,
					cno: row.cno,
					score: row.score,
				}).then(response => {
					this.tableData = response.data
				})
			}
		},
	}
</script>

<style>
	.input-bar-sno {
		width: 15%;
		position: absolute;
		left: 10%;
		top: 15%;
	}

	.input-bar-cno {
		width: 15%;
		position: absolute;
		left: 30%;
		top: 15%;
	}

	.search-button-score {
		width: 15%;
		position: absolute;
		left: 30%;
		top: 15%;
	}

	.input-bar-score {
		width: 15%;
		position: absolute;
		left: 10%;
		top: 40%;
	}

	.update-button {
		width: 15%;
		position: absolute;
		left: 30%;
		top: 20%;
	}
</style>
